<template>
    <div class="sea-page-column">
        <div class="box">

            <blockquote>
                <h5>盒模型 - 弹性布局</h5>
                <div>操作面板</div>
            </blockquote>

            <sea-grid col="2">
                <div class="flex-box box-primary hover-shadow">
                    <div class="flex-header">
                        <h4>Title</h4>
                        <span>subtitle</span>
                        <button class="sea-btn-badge pull-right">
                            <i class="fa fa-fw fa-refresh"></i> 刷新
                        </button>
                    </div>
                    <div class="flex-body">
                        content
                    </div>
                    <div class="flex-footer with-padding">
                        footer
                    </div>
                </div>


                <div class="flex-box box-success hover-shadow">
                    <div class="flex-header">
                        title
                    </div>
                    <div class="flex-body">
                        content
                    </div>
                    <div class="flex-footer with-padding">
                        footer
                    </div>
                </div>


                <div class="flex-box box-danger hover-shadow">
                    <div class="flex-header">
                        title
                        <button class="sea-btn-icon pull-right">
                            <i class="fa fa-fw fa-refresh"></i>
                        </button>
                    </div>
                    <div class="flex-body">
                        content
                    </div>
                    <div class="flex-footer with-padding">
                        footer
                    </div>
                </div>


                <div class="flex-box box-warning hover-shadow">
                    <div class="flex-header">
                        title
                    </div>
                    <div class="flex-body">
                        content
                    </div>
                    <div class="flex-footer with-padding">
                        footer
                    </div>
                </div>


                <div class="flex-box box-info hover-shadow">
                    <div class="flex-header">
                        title
                    </div>
                    <div class="flex-body">
                        content
                    </div>
                    <div class="flex-footer with-padding">
                        footer
                    </div>
                </div>


                <div class="flex-box">
                    <div class="flex-header">
                        default
                    </div>
                    <div class="flex-body">
                        content
                    </div>
                    <div class="flex-footer with-padding">
                        footer
                    </div>
                </div>


                <div class="flex-box">
                    <div class="flex-header">
                        经典左中右、上中下布局
                    </div>
                    <div class="flex-body">
                        <div class="flex-column margin-bottom">
                            <div class="flex-header bg-danger">
                                <span>flex-header</span>
                            </div>
                            <div class="flex-body bg-primary scroll">
                                <span>flex-body</span>
                            </div>
                            <div class="flex-footer bg-warning">
                                <span>flex-footer</span>
                            </div>
                        </div>

                        <div class="flex-row">
                            <div class="flex-left bg-danger">
                                <span>flex-left</span>
                            </div>
                            <div class="flex-body bg-primary scroll">
                                <span>flex-body</span>
                            </div>
                            <div class="flex-right bg-danger">
                                <span>flex-right</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="flex-box">
                    <div class="flex-header">
                        经典左中右、上中下布局
                    </div>
                    <div class="flex-body">
                        <div class="flex-column-gap margin-bottom">
                            <div class="flex-header bg-danger">
                                <span>flex-header</span>
                            </div>
                            <div class="flex-body bg-primary scroll">
                                <span>flex-body</span>
                            </div>
                            <div class="flex-footer bg-warning">
                                <span>flex-footer</span>
                            </div>
                        </div>

                        <div class="flex-row-gap">
                            <div class="flex-left bg-danger">
                                <span>flex-left</span>
                            </div>
                            <div class="flex-body bg-primary">
                                <span>flex-body</span>
                            </div>
                            <div class="flex-right bg-danger">
                                <span>flex-right</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="flex-box box-primary hover-shadow">
                    <div class="flex-header">
                        title
                        <button class="sea-btn-icon pull-right rotate-text" @click="click">
                            <i class="fa fa-chevron-down"></i>
                        </button>
                    </div>
                    <div class="flex-body no-padding">
                        <div class="sea-transition padding" style="height: 56px;" ref="bodyRef">
                            <i class="anim-rotate fa fa-refresh"></i>
                        </div>
                    </div>
                    <div class="flex-footer with-padding">
                        footer
                    </div>
                </div>


                <div class="flex-box" style="height: 320px;">
                    <div class="flex-header">
                        <h4>Flex Box</h4>
                        <span>经典左中右、上中下布局</span>
                    </div>
                    <div class="flex-body">
                        <div style="height: 100%;" class="scroll-mini">
                            <article style="height: 640px;" class="bg-light-gray block">
                                <p>box：选自 lte-admin 的经典布局</p>
                                <p>flex-box：使用 flex 布局的盒模型，比 box 更加灵活</p>
                                <p>flex-row：上中下布局</p>
                                <p>flex-row：左中右布局</p>
                            </article>
                        </div>
                    </div>
                    <div class="flex-footer">
                        <span>footer</span>
                    </div>
                </div>

            </sea-grid>
        </div>

        <div class="box">
            <blockquote>
                <h5>盒模型 - 网格布局</h5>
                <div>网格布局过于灵活，只有几个基础的封装</div>
            </blockquote>

            <div class="grid-col-3 with-gap">
                <div class="grid-col-3 with-gap">
                    <div class="small-card">1</div>
                    <div class="small-card">2</div>
                    <div class="small-card">3</div>
                    <div class="small-card">4</div>
                    <div class="small-card">5</div>
                    <div class="small-card">6</div>
                    <div class="small-card">7</div>
                    <div class="small-card">8</div>
                </div>

                <div class="grid-col-3 with-gap box">
                    <div class="small-card with-badge">
                        <span class="badge bg-red">1</span>
                        1
                    </div>
                    <div class="small-card">2</div>
                    <div class="small-card">3</div>
                    <div class="small-card">4</div>
                    <div class="small-card">5</div>
                    <div class="small-card">6</div>
                    <div class="small-card">7</div>
                    <div class="small-card">8</div>
                </div>
            </div>
        </div>

        <div class="box">
            <blockquote>
                <h5>盒模型 - 小卡片</h5>
                <div>广泛用于各种功能面板、标题栏</div>
                <div>小卡片与按钮有着类似的功能，主要用于展示更多内容。</div>
                <div>通过增加 .with-badge 样式，将 .badge 作为角标展示。</div>
            </blockquote>

            <sea-grid col="4" class="flex-body">
                <div class="flex-center small-card">default</div>
                <div class="flex-center small-card active">active</div>
                <div class="flex-center small-card active">active</div>
                <div class="flex-center small-card disabled">disabled</div>

                <div class="flex-center small-card box-info">default</div>
                <div class="flex-center small-card box-info active">active</div>
                <div class="flex-center small-card box-info active">active</div>
                <div class="flex-center small-card box-info disabled">disabled</div>

                <div class="flex-center small-card box-primary">default</div>
                <div class="flex-center small-card box-primary active">active</div>
                <div class="flex-center small-card box-primary active">active</div>
                <div class="flex-center small-card box-primary disabled">disabled</div>

                <div class="flex-center small-card box-success">default</div>
                <div class="flex-center small-card box-success active">active</div>
                <div class="flex-center small-card box-success active">active</div>
                <div class="flex-center small-card box-success disabled">disabled</div>

                <div class="flex-center small-card box-warning">default</div>
                <div class="flex-center small-card box-warning active">active</div>
                <div class="flex-center small-card box-warning active">active</div>
                <div class="flex-center small-card box-warning disabled">disabled</div>

                <div class="flex-center small-card box-danger">default</div>
                <div class="flex-center small-card box-danger active">active</div>
                <div class="flex-center small-card box-danger active">active</div>
                <div class="flex-center small-card box-danger disabled">disabled</div>
            </sea-grid>
        </div>

        <div class="box">
            <blockquote>
                <h5>盒模型 - 右上角标</h5>
                <div>理论上，只要容器允许追加 position: relative 属性，都可以按照下列方式添加角标 </div>
            </blockquote>

            <div class="grid-col-5 with-gap box">

                <button class="btn btn-default with-badge btn-plain-info">
                    info<span class="badge bg-info">1</span>
                </button>
                <button class="btn btn-default with-badge btn-plain-primary">
                    primary<span class="badge bg-primary">1</span>
                </button>
                <button class="btn btn-default with-badge btn-plain-success">
                    success<span class="badge bg-success">1</span>
                </button>
                <button class="btn btn-default with-badge btn-plain-warning">
                    warning<span class="badge bg-warning">1</span>
                </button>
                <button class="btn btn-default with-badge btn-plain-danger">
                    danger<span class="badge bg-danger">1</span>
                </button>

                <div class="small-card with-badge">
                    <span class="badge bg-info">1</span>
                    1
                </div>
                <div class="small-card with-badge">
                    <span class="badge bg-primary">1</span>
                    1
                </div>
                <div class="small-card with-badge">
                    <span class="badge bg-success">1</span>
                    1
                </div>
                <div class="small-card with-badge">
                    <span class="badge bg-warning">1</span>
                    1
                </div>
                <div class="small-card with-badge">
                    <span class="badge bg-danger">1</span>
                    1
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const bodyRef = ref();

const click = (evt) => {
    evt.currentTarget.classList.toggle("rotated");
    bodyRef.value.classList.toggle("shrink-height");
}

</script>

<style scoped>
</style>
